<template>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper" @click="handleClick">
      <div
        class="swiper-slide swiper-no-swiping"
        v-for="via in viaList.list"
        :key="via.id"
      >
        <img class="tu" :src="via.avatarURL" />
        <p class="name">{{ via.nickname }}</p>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
// 引入Swiper js和css
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { mapActions, mapState } from "vuex";

export default {
  name: "Caroucel",
  watch: {
    viaList() {
      this.$nextTick(() => {
        new Swiper(".swiper-container", {
          speed: 2500,
          slidesPerView: 3,
          slidesPerGroup: 3,
          slidesPerColumn: 2,
          spaceBetween: 30,
          autoplay: true,
          slidesPerColumnFill: "row",
          noSwiping: true,
        });
      });
    },
  },
  mounted() {
    this.getBannerVia();
  },
  methods: {
    handleClick() {},
    ...mapActions(["getBannerVia"]),
  },

  computed: {
    ...mapState({
      viaList: (state) => state.vip.viaList,
    }),
  },
};
</script>

<style lang="stylus" scoped>
.swiper-container
  width 100%
  height 100%
  margin-left auto
  margin-right auto
.swiper-slide
  text-align center
  font-size 18px
  background #fff
.tu
  width 53px
  border-radius 50%
.name
  font-size 13px
  color #6D6D71
  line-height 18px
</style>
